<template>
    <el-select 
    @click="loaddate" 
    v-model="value" 
    class="m-2" 
    placeholder="请选择员工所在部门"
    @change="valueChange"
    @key-value="value"
    >
      <el-option
        v-for="item in options"
        :key="item.deptno"
        :label="item.dname"
        :value="item.deptno"
      >
      <div style="display: flex;justify-content: space-between;">
      <span style="float: left">{{ item.dname }}</span>
      <span
        style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        "
        >{{ item.loc }}</span
      >
    </div>
      </el-option>

    </el-select>


    
  </template>
  
  <script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import $axios from "../../utils/axios"

  const value = ref(2)
  
  const options = ref([
    {
      deptno: '',
      dname: '请选择',
      loc:''
    }
  ])
// 组件传值1.在组件里定义一个时间 要的是事件名
  const emits=defineEmits(['selectChange','a','b'])

//   在组件中定义属性
  const props = defineProps({
    initvalue:{
        type:Number,
        required: true,
        default:1
    }
  })

    let loaddate = async() =>{

        const path='/dept/q/all'
        const {data:res} = await $axios.get(path)
        if(res.code===200)
        {
            options.value=res.result
        }

    }
loaddate()

onMounted(() => {
    value.value=props.initvalue
})

let valueChange=(val) =>{
    console.log("hh1:",val);
    // 子组件向父组件传值，依赖的组件的自定义事件完成的
    // 组件传值2.子组件发生一个事件
    // 真正发生了selectChange事件，参数是val，
    emits('selectChange',val)
}
  </script>
  